<!--
 * @Author: LiZn
 * @Date: 2021-08-20 04:05:21
 * @LastEditTime: 2021-08-23 00:02:53
 * @LastEditors: LiZn
 * @Description: 列表页面详细内容
 * @FilePath: \todaynews\src\views\listcontent.vue
-->
<template>
  <div id="newscontent">
    <div @click="goBack" class="topback">
      <i class="el-icon-arrow-left iconsize"></i>
      <transition name="fade">
        <span v-if="topShow">战地土猴子</span>
      </transition>
    </div>
    <div class="content">
      <p class="title">这里是title头部选择框这里是title头部选择框这里是title头部选择框</p>
      <div class="tophea">
        <el-avatar size="medium" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar> 
        <div class="leftcont">
          <div class="userinfo">
            <span class="username">战地土猴子</span>
            <span class="fabudate">原创: 08-12</span>
          </div>
          <el-button @click="focusBtn" class="focus" size="small">关注</el-button>
        </div>
      </div>      
      <!-- 内容区域 -->
      <div class="contens">
        <p>政知君注意到，他在担任广州军区联勤部政委时，他曾参与组织过一次官兵思想大讨论，原因是一份调查报告发现：多年的和平环境，让部分官兵产生了远离战场的错觉。

　　在讨论中，吴社洲说，“环境再变，军人的使命担当不变。要借着此次大讨论的东风，开展一次‘和平积习’大扫除，打牢官兵当兵打仗、带兵打仗、练兵打仗的思想根基，切实把战斗力标准立起来落下去。”

　　2016年，吴社洲任中国人民解放军中部战区副政委兼中部战区陆军政委。2017年，吴社洲以“西部战区政委”的身份对外亮相，他也是当时五大战区中最年轻的一位军政主官。

　　当时，西部战区司令员是赵宗岐（2016年至2020年任职）。今年2月，赵宗岐履新第十三届全国人民代表大会外事委员会副主任委员。

　　公开报道显示，西部战区下辖领导和指挥四川、西藏、重庆、甘肃、宁夏、青海、新疆的所属武装力量。

　　2017年8月，阿坝州九寨沟县发生地震。当时，西部战区曾迅速组织部队投入抗震救灾，时任战区司令员赵宗岐、政委吴社洲命令战区陆军、战区空军、四川和甘肃省军区、西宁联保中心就近部队立即做好抗震救灾各项准备。政知君注意到，他在担任广州军区联勤部政委时，他曾参与组织过一次官兵思想大讨论，原因是一份调查报告发现：多年的和平环境，让部分官兵产生了远离战场的错觉。

　　在讨论中，吴社洲说，“环境再变，军人的使命担当不变。要借着此次大讨论的东风，开展一次‘和平积习’大扫除，打牢官兵当兵打仗、带兵打仗、练兵打仗的思想根基，切实把战斗力标准立起来落下去。”

　　2016年，吴社洲任中国人民解放军中部战区副政委兼中部战区陆军政委。2017年，吴社洲以“西部战区政委”的身份对外亮相，他也是当时五大战区中最年轻的一位军政主官。

　　当时，西部战区司令员是赵宗岐（2016年至2020年任职）。今年2月，赵宗岐履新第十三届全国人民代表大会外事委员会副主任委员。

　　公开报道显示，西部战区下辖领导和指挥四川、西藏、重庆、甘肃、宁夏、青海、新疆的所属武装力量。

　　2017年8月，阿坝州九寨沟县发生地震。当时，西部战区曾迅速组织部队投入抗震救灾，时任战区司令员赵宗岐、政委吴社洲命令战区陆军、战区空军、四川和甘肃省军区、西宁联保中心就近部队立即做好抗震救灾各项准备。</p>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>

  export default {
    data(){
      return {
        fromPath:'',
        topShow:false
      }
    },
    beforeRouteEnter(to,from,next){
      next(vm=>{
        vm.$data.fromPath = from.path;
      })
    },
    mounted(){
      document.documentElement.scrollTop=this.$store.state.newsTop
      const scrollHeight = document.querySelector('.title').offsetHeight+document.querySelector('.tophea').offsetHeight
      //首次进入判断是不是在最顶部
      if(document.documentElement.scrollTop > scrollHeight){
        this.topShow = true
      }
      window.addEventListener('scroll',()=>{
        if(document.documentElement.scrollTop > scrollHeight){
            this.topShow = true
        }else{
          this.topShow = false
        }
      })
    },
    methods:{
      goBack(){
        this.$router.push({
          path:this.fromPath
        })
      },
      focusBtn(){
        console.log(123)
        this.$axios.post('/user/focus',{userId:'lixin'}).then(res=>{
          if(res.code&&res.code==2){
            this.$message({
              message:res.data.message||'关注成功',
              type:"success",
              center: true,
              duration:1000
            })
          }
        })
      }
    },
     //修改列表页的meta值，false时再次进入页面会重新请求数据。
    beforeRouteLeave(to, from, next) {
      from.meta.keepAlive = false;
      this.$store.commit('setNewsHeight',document.documentElement.scrollTop);
      next();
    }
  }

</script>
<style  scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
  #newscontent{
    margin:0 0.15rem;
  }
  .title{
    text-align:left;
    font-size:0.4rem;
    padding:0.1rem;
  }
  .content{
    margin:0 0.2rem;
    margin-top:1rem;
  }
  .topback{
    width:100%;
    text-align: left;
    position:fixed;
    top:0;
    background:white;
    display:flex;
    align-items: center;
  }
  .iconsize{
    font-size:0.7rem
  }
  .tophea{
    text-align:left;
    display:flex;
    flex-direction:row;
    padding-top:0.4rem;
  }
  .userinfo{
    display: inherit;
    flex-direction: column;
    padding-left:0.2rem;
  }
  .username{
    font-size:0.3rem
  }
  .fabudate{
    font-size:0.2rem;
  }
  .leftcont{
    display:flex;
    width:100%;
    flex-direction:row;
    justify-content:space-between
  }
  .focus{
    background:rgb(255, 255, 255);
    color:rgb(230, 64, 23)
  }
  .contens{
    padding:0.5rem 0;
    font-size:.3rem;
    line-height:.5rem;
  }
  .contens p{
    text-indent:.6rem;
    text-align:left
  }
</style>
